<div class="xdata-box">
  <h3>总计</h3>
  <ul>
    <li>
      <span><%= @grow_students.inject{ |result, element| result + element } %></span>
      <em>新增学员(人)</em>
    </li>
    <li>
      <span><%= @spend_students.inject{ |result, element| result + element } %></span>
      <em>缴费学员(人)</em>
    </li>
  </ul>
  <div id="courseCo"></div>
</div>
<div class="pdata-box clearfix">
  <div id="counsType"></div>
  <div id="dataSex"></div>
  <div id="dataAge"></div>
  <div id="conAbility"></div>
</div>
<script>
// 导师课消
var myChart = echarts.init(document.getElementById('courseCo'));
var xAxisData = <%==  @student_date_array %>;
var data1 = <%== @grow_students %>;
var data2 = <%== @spend_students %>;

option = {
  legend: {
    data: ['新增学员(人)', '缴费学员(人)', '即将过期(人)'],
    align: 'left'
  },
  toolbox: {
    // y: 'bottom',
    feature: {
      magicType: {
        type: ['stack', 'tiled']
      },
      dataView: {},
      saveAsImage: {
        pixelRatio: 2
      }
    }
  },
  tooltip: {},
  xAxis: {
    data: xAxisData,
    silent: false,
    splitLine: {
      show: false
    }
  },
  yAxis: {
  },
  toolbox: {
    show : true,
  },
  dataZoom: [{
    startValue: xAxisData[0]
  }, {
    type: 'inside'
  }],
    series: [{
      name: '新增学员(人)',
      type: 'bar',
      data: data1,
      animationDelay: function (idx) {
        return idx * 10;
      }
    }, {
      name: '缴费学员(人)',
      type: 'bar',
      data: data2,
      animationDelay: function (idx) {
        return idx * 10 + 100;
      }
    }],
      animationEasing: 'elasticOut',
      animationDelayUpdate: function (idx) {
        return idx * 5;
      }
};
myChart.setOption(option);

//消费类型占比
var myChart1 = echarts.init(document.getElementById('counsType'));
var reckon_pay_way_key = <%== @reckon_pay_way_key %>;
var reckon_pay_way_value = <%== @reckon_pay_way_value %>;
option1 = {
  color : ['#3cf','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
  title : {
    text: '消费类型占比',
    x:'14%'
  },
  tooltip : {
    trigger: 'item',
    formatter: "{a} <br/>{b} : {c} ({d}%)"
  },
  legend: {
    x : 'center',
    y : 'bottom',
    data: reckon_pay_way_key
  },
  toolbox: {
    show : true,
    feature : {
      mark : {show: true},
      // dataView : {show: true, readOnly: false},
      magicType : {
        show: true,
        type: ['pie', 'funnel']
      },
      // restore : {show: true},
      saveAsImage : {show: true}
    }
  },
  calculable : true,
  series : [
  {
    name:'半径模式',
    type:'pie',
    radius : [20, 140],
    center : ['50%', '50%'],
    roseType : 'radius',
    lableLine: {
      normal: {
        show: false
      },
      emphasis: {
        show: true
      }
    },
    data: reckon_pay_way_value
  }
  ]
};
myChart1.setOption(option1);
// 性别占比
var myChart2 = echarts.init(document.getElementById('dataSex'));
var all_student_sex_array = <%== @all_student_sex_array %>;

option2 = {
  title : {
    text: '性别占比',
    x:'14%'
  },
  tooltip : {
    trigger: 'item',
    formatter: "{a} <br/>{b} : {c} ({d}%)"
  },
  legend: {
    x : 'center',
    y : 'bottom',
    data:['男','女']
  },
  toolbox: {
    show : true,
    feature : {
      mark : {show: true},
      // dataView : {show: true, readOnly: false},
      magicType : {
        show: true,
        type: ['pie', 'funnel']
      },
      // restore : {show: true},
      saveAsImage : {show: true}
    }
  },
  calculable : true,
  series : [
  {
    name:'半径模式',
    type:'pie',
    radius : [20, 140],
    center : ['50%', '50%'],
    roseType : 'radius',
    lableLine: {
      normal: {
        show: false
      },
      emphasis: {
        show: true
      }
    },
    data: all_student_sex_array
  }
  ]
};
myChart2.setOption(option2);
// 年龄阶段占比
var myChart3 = echarts.init(document.getElementById('dataAge'));
var student_age_group_arr = <%== @student_age_group_arr %>;

option3 = {
  title : {
    text: '年龄阶段占比',
    x:'14%'
  },
  tooltip : {
    trigger: 'item',
    formatter: "{a} <br/>{b} : {c} ({d}%)"
  },
  legend: {
    x : 'center',
    y : 'bottom',
    data:['幼儿','少儿','少年','成年']
  },
  toolbox: {
    show : true,
    feature : {
      mark : {show: true},
      // dataView : {show: true, readOnly: false},
      magicType : {
        show: true,
        type: ['pie', 'funnel']
      },
      // restore : {show: true},
      saveAsImage : {show: true}
    }
  },
  calculable : true,
  series : [
  {
    name:'半径模式',
    type:'pie',
    radius : [20, 140],
    center : ['50%', '50%'],
    roseType : 'radius',
    lableLine: {
      normal: {
        show: false
      },
      emphasis: {
        show: true
      }
    },
    data: student_age_group_arr
  }
  ]
};
myChart3.setOption(option3);
// 消费能力占比
var myChart4 = echarts.init(document.getElementById('conAbility'));
var student_shopping_level = <%== @student_shopping_level %>;

option4 = {
  title : {
    text: '消费能力占比',
    x:'14%'
  },
  tooltip : {
    trigger: 'item',
    formatter: "{a} <br/>{b} : {c} ({d}%)"
  },
  legend: {
    x : 'center',
    y : 'bottom',
    data:['0-5k','5-10k','10k-20k','20k以上']
  },
  toolbox: {
    show : true,
    feature : {
      mark : {show: true},
      // dataView : {show: true, readOnly: false},
      magicType : {
        show: true,
        type: ['pie', 'funnel']
      },
      // restore : {show: true},
      saveAsImage : {show: true}
    }
  },
  calculable : true,
  series : [
  {
    name:'半径模式',
    type:'pie',
    radius : [20, 140],
    center : ['50%', '50%'],
    roseType : 'radius',
    lableLine: {
      normal: {
        show: false
      },
      emphasis: {
        show: true
      }
    },
    data: student_shopping_level
  }
  ]
};
myChart4.setOption(option4);
</script>